<template>
  <div>
    <p>hello {{title}} -- {{count}}</p>
    <p>double {{doubleCount}}</p>
    <p>{{ state.message }}</p>
    <button @click="increment">button</button>
    <ButtonTest text="Foo" @outClick="onOutClick" />

    <!-- <p>hello {{state.title}}</p>
    <button @click="increment">add {{count}}</button>
    <input type="text"> -->
  </div>
</template>

<script>

  import { defineComponent, ref, reactive, computed, onMounted } from 'vue'
  import ButtonTest from './components/ButtonTest.vue'

  // - Data
  // - Method
  // - Hooks
  // - Computed
  // - Props
  // - Emit
  // - components
  export default defineComponent({  //使用defineComponent，可查看高亮类型
    components: {
      ButtonTest
    },
    // 组件初始化时执行
    setup() {
      // let count = 1;
      // const state = {
      //   count: 1
      // }

      //为一个值创建引用
      //普通值 string number boolean 数据响应需要用 ref
      const count = ref(0)

      //对象需要数据响应，需要用reactive
      const state = reactive({
        message: 'hello'
      })

      const doubleCount = computed(() => count.value * 2)

      const increment = (e) => {
        count.value += 10   // 注意value
        state.message = 'world'
      }

      onMounted(() => {
        // mounted生命周期函数
        console.log('... mounted ...');
      })

      const onOutClick = (now) => {
        console.log('button on outClick ==' + now);
      }

      // 返回值中的成员可以直接在模板中使用
      return {
        title: "Vue.js 3.0 good",
        count,
        increment,
        state,
        doubleCount,
        onOutClick
      }
    }
  })
</script>

<style scoped>
div {
  color: blue;
}
</style>